export default function Forms() {
  return (
    <div className="flex justify-center pt-4">
      <form>
        <label className="block">
          <span className="block text-sm font-medium text-slate-700">Username</span>
          <input type="text" value="town" disabled className="block w-full bg-white border border-slate-300 rounded
            px-3 py-2 text-sm shadow-sm
            focus:outline-none focus:ring-1 focus:ring-sky-500
            disable:bg-slate-50 disabled:border-slate-200 disabled:text-slate-500 disabled:shadow-none
            invalid:bg-pink-500 invalid:text-pink-600
            " />
        </label>
        <label className="block">
          <span className="block text-sm font-medium text-slate-700">Email</span>
          <input type="email" className="block w-full bg-white border border-slate-300 rounded
            px-3 py-2 text-sm shadow-sm
            focus:outline-none focus:ring-1 focus:ring-sky-500
            disable:bg-slate-50 disabled:border-slate-200 disabled:text-slate-500 disabled:shadow-none
            invalid:border-pink-500 invalid:text-pink-600 
            focus:invalid:border-pink-500 focus:invalid:ring-pink-500
            " />
        </label>
      </form>
    </div>
  )
}